<template>
  <view class="all-container">
    <scroll-view 
      class="scroll-container" 
      scroll-y 
      :show-scrollbar="false"
    >
      <!-- 顶部标题区 -->
      <!-- <view class="title-section">
        <text class="main-title">全部城市</text>
        <text class="sub-title">ALL CITIES</text>
        <view class="divider"></view>
      </view> -->

      <!-- 城市列表 -->
      <view class="city-list">
        <view class="city-item" v-for="(city, index) in cities" :key="index">
          <image :src="city.image" mode="aspectFill" class="city-image" />
          <view class="city-info">
            <text class="city-name">{{ city.name }}</text>
            <text class="city-desc">{{ city.description }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const cities = ref([
  {
    name: '大理',
    description: '风花雪月，苍山洱海',
    image: '/static/images/dali.jpg'
  },
  {
    name: '丽江',
    description: '古城韵味，雪山风光',
    image: '/static/images/lijiang.jpg'
  },
  {
    name: '昆明',
    description: '春城花都，四季如春',
    image: '/static/images/kunming.jpg'
  }
]);
</script>

<style lang="scss" scoped>
.all-container {
  height: 100%;
  width: 100%;
  background-color: #f5f5f5;
}

.scroll-container {
  height: calc(100% + 40px);
  width: 100%;
  padding: 30px 20px;
  box-sizing: border-box;
  margin-top: -20px;
}

.title-section {
  text-align: center;
  margin-bottom: 30px;
  
  .main-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 8px;
  }
  
  .sub-title {
    font-size: 16px;
    color: #666;
    display: block;
    margin-bottom: 12px;
  }
  
  .divider {
    width: 40px;
    height: 2px;
    background-color: #333;
    margin: 0 auto;
  }
}

.city-list {
  .city-item {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .city-image {
      width: 100%;
      height: 240px;
      object-fit: cover;
    }
    
    .city-info {
      padding: 20px;
      
      .city-name {
        font-size: 20px;
        font-weight: bold;
        color: #333;
        display: block;
        margin-bottom: 12px;
      }
      
      .city-desc {
        font-size: 15px;
        color: #666;
        line-height: 1.6;
      }
    }
  }
}
</style> 